<template>
   <el-row :gutter="20">
    <el-col :span="6">
        <TotoalSale :report-data="reportData"/><!-- 使用中横杠连接方式比较正规 -->
    </el-col>
    <el-col :span="6">
        <TotalOrder :report-data="reportData"/>
    </el-col>
    <el-col :span="6">
        <TodayUser :report-data="reportData"/>
    </el-col>
    <el-col :span="6">
        <TotalUser :report-data="reportData"/>
    </el-col>
   </el-row>
</template>

<script setup>
import TotoalSale from './TotalSale.vue';
import TotalOrder from './TotalOrder.vue';
import TodayUser from './TodayUser.vue';
import TotalUser from './TotalUser.vue';
import {ref,onMounted} from 'vue'
//导入获取数据的方法
import { getReportData } from '@/api';

//接收数据
const reportData = ref({})

//  onMounted(async()=>{
//    reportData.value = await getReportData()
//  })
   reportData.value = await getReportData()
</script>

<style lang="scss" scoped>
//深度选择器,给没有data-v的属性写样式
:deep(span) {
  font-size: 14px;
  color: #464545;
  &.css-1 {
    margin-left: 8px;
    font-weight: 550;
  }
  &.increase {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 10px;
    border-width: 4px;
    border-color: transparent transparent green transparent;
    border-style: solid;
    transform: translateY(-50%);
  }
  &.decrease {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 10px;
    border-width: 4px;
    border-color: red transparent transparent transparent;
    border-style: solid;
  }
}
</style>